.index {
  width: 100%;
  background-color: #eee;
  min-height: 100vh;
  padding-bottom: 40px;
  .header {
    position: relative;
    .swiper {
      width: 100%;
      height: 300px;
      .swiper-item {
        width: 100%;
        height: 100%;
        .image {
          width: 100%;
          height: 100%;
          filter:brightness(85%);
        }
      }
    }
    .logo {
      position: absolute;
      top: 44px;
      left: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100px;
      height: 20px;
      .logo-img {
        width: 100%;
        height: 100%;
      }
    }
    .point {
      width: calc(100% - 24px);
      margin: auto;
      margin-top: -50px;
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.07);
      .point-header {
        width: 100%;
        height: 50px;
        background-color: #242a30;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        box-shadow: rgba($color: #ffffff, $alpha:0.5) 0px 0px 2px 0px;
        box-sizing: border-box;
        .avatar {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .avatar-img {
            width: 32px;
            height: 32px;
            border-radius: 16px;
            margin-left: 16px;
            margin-right: 10px;
            overflow: hidden;
          }
          .avatar-title {
            font-size: 12px;
            color: #d6ae64;
          }
        }
        .bind-btn{
          font-size: 16px;
          color: #d6ae64;
          padding-right: 14px;
        }
      }
      .point-content {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background-color: white;
        width: 100%;
        padding:12px 0px 16px;
        .point-item {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          .point-item-img {
            width: 48px;
            height: 48px;
          }
          .point-item-title {
            font-size: 18px;
            font-weight: bold;
            margin-top: 8px;
          }
          .point-item-num {
            color: #999;
            margin-top: 8px;
          }
        }
      }
    }
    .card {
      .card-item {
        display: flex;
        height: 60px;
        background-color: "#FFE5CF";
        flex-direction: "row";
        align-items: "center";
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
    }
    
  }
  .page-content{
    width: calc(100% - 24px);
    box-sizing: border-box;
    margin:auto;
    margin-top: 10px;
    
    .family{
      width: 100%;
      margin: auto;
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.07);
      
      
      .family-header{
        height: 60px;
        background-color: #FFE5CF;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        padding:0px 16px 0px 20px;
        box-sizing: border-box;
        overflow: hidden;

        .title{
          font-size: 20px;
          font-weight: bold;
          color:#222;
        }
        .ins-btn{
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 20px;
          overflow: hidden;
          background-color: #E83B2F;
          padding:10px 14px;
          .ins-btn-text{
            font-size: 16px;
            color: white;
            margin-right: 10px;
          }
        }
      }
      .family-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80px;
        background-color: white;
        .content-left{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .info{
            color:#222;
            margin-right: 30px;
            .danger{
              font-size: 20px;
              color:#E83B2F;
              margin-left: 20px;
              margin-right: 3px;
              font-weight: bold;
            }
          }
        }
        .content-right{
          color:#E83B2F;
          margin-right: 16px;
        }
      }
    }
    .fuli-buy{
      width: 100%;
      height: 140px;
      text-align: center;
      line-height: 140px;
      background-color: white;
      border-radius: 16px;
      font-weight: bold;
      box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.08), 0 4rpx 8rpx rgba(0, 0, 0, 0.07);
      margin-top: 10px;
    }
    .account{
      margin-top: 22px;
      .account-header{
        .title{
          font-size: 20px;
          font-weight: bold;
          color:#222;
        }
      }
      .account-type{
        margin-top: 22px;
        .type-list{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          height:40px;
          .type-item{
            padding:10px 16px;
            background-color: #e83a2f;
            border-radius: 20px;
            border-width: 1px;
            border-color:#e83a2f;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            color:white;
            &:last-child{
              margin-right: 0px;
            }
            &.active{
              background-color: white;
              border-color: white;
              font-weight: bold;
              color:black;
            }
          }
        }
      }
      .account-content{
        margin-top: 10px;
        .jifen-item{
          margin-top: 10px;
          padding-top: 12px;
          box-sizing: border-box;
          width: 100%;
          border-radius: 16px;
          overflow: hidden;
          background-color: white;
          .jifen-item-header{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding:0px 12px;

            .left{
              display: flex;
              align-items: center;
              justify-content: flex-start;
              .name{
                font-weight: bold;
                max-width: 160px;
                flex-shrink: 0;
                word-break: keep-all;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .num{
                // font-size: 24px;
                color:#E83B2F;
                margin-left: 10px;
                font-weight: bold;
              }
            }
            .right{
              padding:5px 10px;
              border-radius: 8px;
              text-align: center;
              background-color: rgba(232,59,47,0.1);
              color:#E83B2F;
              flex-shrink: 0;
              &.finished{
                background-color: rgba(103,194,58,0.1);
              }
              .complete{
                
                color:rgba(103,194,58,1);
              }
              .pending{
              }
            }
          }
        }
        .jifen-item-content{
          margin-top: 10px;
          height: 120px;
          .image{
            width: 100%;
            height: 120px;
          }
        }
      }
    }
  }
}
